<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn Laravel 5</title>

    <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .main {
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
            width:800px;
            vertical-align:middle;
        }
    </style>
</head>

<div id="content" style="padding: 50px;">

    <h1 style="text-align: center; margin-top: 10px;">{{ $article->title }}</h1>
    <div id="date" class="main" style="text-align: right;">
        {{ $article->updated_at }} by ({{ $article->author }})
    </div>
    <hr>
    <div id="content" class="main">
        <p>
            {!!  $article->body !!}
        </p>
    </div>
    <div class="main" style="text-align: right">
        <button class="glyphicon glyphicon-thumbs-up"></button>
        <button class="glyphicon glyphicon-thumbs-down"></button>
    </div>
    <br>
    <br>
    评论
    @foreach ($article['hasManyComments'] as $comment)
        <div>
            <h4>{{$comment->nickname}}</h4>
            <h4>{{$comment->email}}</h4>
            <h4>{{$comment->content}}</h4>
        </div>
        <br>
    @endforeach

    <div id="comments" class="main" style="margin-top: 50px;">

        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>操作失败</strong> 输入不符合要求<br><br>
                {!! implode('<br>', $errors->all()) !!}
            </div>
        @endif

        <div id="new">
            <form action="{{ url('comment') }}" method="POST">
                {!! csrf_field() !!}
                <input type="hidden" name="article_id" value="{{ $article->id }}">

                <div class="form-group">
                    <label>Nickname</label>
                    <input type="text" name="nickname" class="form-control" style="width: 300px;" required="required">
                </div>
                <div class="form-group">
                    <label>Email address</label>
                    <input type="email" name="email" class="form-control" style="width: 300px;">
                </div>
                <div class="form-group">
                    <label>Home page</label>
                    <input type="text" name="website" class="form-control" style="width: 300px;">
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea name="content" id="newFormContent" class="form-control" rows="10"
                              required="required"></textarea>
                </div>
                <button type="submit" class="btn btn-lg btn-success col-lg-12">Submit</button>
            </form>
        </div>

        <script>
            function reply(a) {
                var nickname = a.parentNode.parentNode.firstChild.nextSibling.getAttribute('data');
                var textArea = document.getElementById('newFormContent');
                textArea.innerHTML = '@' + nickname + ' ';
            }
        </script>

        <div class="conmments" style="margin-top: 100px;">
            @foreach ($article->hasManyComments as $comment)

                <div class="one" style="border-top: solid 20px #efefef; padding: 5px 20px;">
                    <div class="nickname" data="{{ $comment->nickname }}">
                        @if ($comment->website)
                            <a href="{{ $comment->website }}">
                                <h3>{{ $comment->nickname }}</h3>
                            </a>
                        @else
                            <h3>{{ $comment->nickname }}</h3>
                        @endif
                        <h6>{{ $comment->created_at }}</h6>
                    </div>
                    <div class="content">
                        <p style="padding: 20px;">
                            {{ $comment->content }}
                        </p>
                    </div>
                    <div class="reply" style="text-align: right; padding: 5px;">
                        <a href="#new" onclick="reply(this);">回复</a>
                    </div>
                </div>

            @endforeach
        </div>
    </div>

</div>

</body>
</html>
